
import PropTypes from '../../../_util/vue-types'
import BaseMixin from '../../../_util/BaseMixin'
const ROW = 4
const COL = 3
function noop () {}
function goYear (direction) {
  const value = this.sValue.clone()
  value.add(direction, 'year')
  this.setState({
    sValue: value,
  })
}

function chooseYear (year) {
  const value = this.sValue.clone()
  value.year(year)
  value.month(this.sValue.month())
  this.__emit('select', value)
}

export default {
  mixins: [BaseMixin],
  props: {
    rootPrefixCls: PropTypes.string,
    value: PropTypes.object,
    defaultValue: PropTypes.object,
    locale: PropTypes.object,
  },
  data () {
    this.nextDecade = goYear.bind(this, 10)
    this.previousDecade = goYear.bind(this, -10)
    return {
      sValue: this.value || this.defaultValue,
    }
  },
  methods: {
    years () {
      const value = this.sValue
      const currentYear = value.year()
      const startYear = parseInt(currentYear / 10, 10) * 10
      const previousYear = startYear - 1
      const years = []
      let index = 0
      for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
        years[rowIndex] = []
        for (let colIndex = 0; colIndex < COL; colIndex++) {
          const year = previousYear + index
          const content = String(year)
          years[rowIndex][colIndex] = {
            content,
            year,
            title: content,
          }
          index++
        }
      }
      return years
    },
  },

  render () {
    const { sValue: value, locale, $listeners = {}} = this
    const decadePanelShow = $listeners.decadePanelShow || noop
    const years = this.years()
    const currentYear = value.year()
    const startYear = parseInt(currentYear / 10, 10) * 10
    const endYear = startYear + 9
    const prefixCls = `${this.rootPrefixCls}-year-panel`

    const yeasEls = years.map((row, index) => {
      const tds = row.map(yearData => {
        const classNameMap = {
          [`${prefixCls}-cell`]: 1,
          [`${prefixCls}-selected-cell`]: yearData.year === currentYear,
          [`${prefixCls}-last-decade-cell`]: yearData.year < startYear,
          [`${prefixCls}-next-decade-cell`]: yearData.year > endYear,
        }
        let clickHandler = noop
        if (yearData.year < startYear) {
          clickHandler = this.previousDecade
        } else if (yearData.year > endYear) {
          clickHandler = this.nextDecade
        } else {
          clickHandler = chooseYear.bind(this, yearData.year)
        }
        return (
          <td
            role='gridcell'
            title={yearData.title}
            key={yearData.content}
            onClick={clickHandler}
            class={classNameMap}
          >
            <a
              class={`${prefixCls}-year`}
            >
              {yearData.content}
            </a>
          </td>)
      })
      return (<tr key={index} role='row'>{tds}</tr>)
    })

    return (
      <div class={prefixCls}>
        <div>
          <div class={`${prefixCls}-header`}>
            <a
              class={`${prefixCls}-prev-decade-btn`}
              role='button'
              onClick={this.previousDecade}
              title={locale.previousDecade}
            />
            <a
              class={`${prefixCls}-decade-select`}
              role='button'
              onClick={decadePanelShow}
              title={locale.decadeSelect}
            >
              <span class={`${prefixCls}-decade-select-content`}>
                {startYear}-{endYear}
              </span>
              <span class={`${prefixCls}-decade-select-arrow`}>x</span>
            </a>

            <a
              class={`${prefixCls}-next-decade-btn`}
              role='button'
              onClick={this.nextDecade}
              title={locale.nextDecade}
            />
          </div>
          <div class={`${prefixCls}-body`}>
            <table class={`${prefixCls}-table`} cellSpacing='0' role='grid'>
              <tbody class={`${prefixCls}-tbody`}>
                {yeasEls}
              </tbody>
            </table>
          </div>
        </div>
      </div>)
  },
}

